<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>进度条</title>
		<style>
			html,
			body {
				margin: 0;
				height: 100%;
			}

			/* 这里是外层大遮罩 */
			#div0 {
				width: 100%;
				height: 100%;
				background: #CCCCCC;
				z-index: 12138;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0.6;
				filter: alpha(opacity=60);
				/* display: none; */
			}

			/* 进度条本身 */
			#div1 {
				width: 500px;
				height: 30px;
				background: red;
				z-index: 12139;
				position: absolute;
				margin: auto;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}

			#div2 {
				width: 0;
				height: 30px;
				background: green;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table border="1" style="margin: auto;">
			<tr>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
			</tr>
			<tr>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
			</tr>
			<tr>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
			</tr>
			<tr>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
			</tr>
			<tr>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
			</tr>
			<tr>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
			</tr>
			<tr>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
				<td>xxxxxxxxxxx</td>
			</tr>
		</table>
		<div>
			<div id="div0"></div>
			<div id="div1">
				<div id="div2"></div>
			</div>
		</div>

	</body>
	<script src="js/movePerfect.js"></script>
	<script>
		var rate = 0;
		var div2 = document.getElementById("div2");
		var timer = setInterval(function() {
			// 取1-10的随机数
			var ran = Math.ceil(Math.random() * 10);
			rate += ran;
			if (rate >= 100) {
				div2.style.width = '500px';
				div2.innerHTML = '100%';
				clearInterval(timer);
				return;
			}
			div2.style.width = 500 * (rate / 100) + 'px';
			div2.innerHTML = rate +'%';
		}, 300);
	</script>
</html>
